<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性与监听器</title>
    <!-- 引入Vue.js -->

    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="image-item">
        <img id="img" style="width: 100%;" src="https://img-operation.csdnimg.cn/csdn/silkroad/img/1629276178344.png"/>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    interceptImg();
    new Vue({
      el: '#app'
    })
    function interceptImg() {
      var el = document.getElementById('img');
      el.onload = function() {
        var scale = el.naturalHeight/el.naturalWidth;
        var parentScale = 45/85;
        console.log(scale,parentScale)
        if(scale > parentScale) {
          el.style.width="100%"
        }else if(scale < parentScale) {
          el.style.height="100%"
        } else {
          el.style.width="100%"
          el.style.height="100%"
        }
      };
      el.addEventListener('click', function () {
        alert('fdsf')
      })
    }
  </script>
  <style type="text/css">
    .image-item {
      width: 85px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  </style>
</html>
